﻿@page "/tree-grid/conditional-formatting"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This samples demonstrates the way of customizing the cells by highlighting the cells of Duration column based on certain condition using the <code>QueryCellInfo</code> event.</p>
</SampleDescription>
<ActionDescription>
    <p>The appearance of cells can be customized by using the <code>QueryCellInfo</code> event. The QueryCellInfo event triggers for every cell. In that event handler, you can get <code>QueryCellInfoEventArgs</code> that contains the details of the cell.</p>
    <p>More information about conditional formatting can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/cell/#customize-cell-styles'> documentation</a> section.</p>
</ActionDescription>


<style>
    .lessduration, td.lessduration.e-active  {
        background-color: #336c12;
        color: white !important;
    }

    .highduration, td.highduration.e-active {
        background-color: #7b2b1d;
        color: white !important;
    }
</style>
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" Height="315" ParentIdMapping="ParentID" TreeColumnIndex="1" AllowPaging="true">
                <TreeGridEvents QueryCellInfo="QueryCellInfoHandler" TValue="SelfReferenceData"></TreeGridEvents>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" IsPrimaryKey="true" Width="80" TextAlign=" Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="140"></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" TextAlign=" Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="100" EditType="Syncfusion.Blazor.Grids.EditType.NumericEdit"></TreeGridColumn>
                    <TreeGridColumn Field="Priority" HeaderText="Priority" Width="80"></TreeGridColumn>
                    <TreeGridColumn Field="Approved" HeaderText="Approved" Width="100" Type="Syncfusion.Blazor.Grids.ColumnType.Boolean" DisplayAsCheckBox="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center" EditType="Syncfusion.Blazor.Grids.EditType.BooleanEdit"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code{

    public List<SelfReferenceData> TreeData { get; set; }

    public void QueryCellInfoHandler(QueryCellInfoEventArgs<SelfReferenceData> Args)
    {
        if (Args.Column.Field == "Duration" && Args.Data.Duration < 15)
        {

            Args.Cell.AddClass(new string[] { "lessduration" });
        }
        else if (Args.Column.Field == "Duration" && Args.Data.Duration >= 15)
        {
            Args.Cell.AddClass(new string[] { "highduration" });
        }
    }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }
}
